<template>
  <div class="home-main">
    <div class="scene" v-for="(s, i) in sceneDetail" :key="i">
      <div class="main_n">
        <h3 class="title" v-if="s.name">{{ s.name }}</h3>
        <p>进入场景</p>
      </div>
      <div class="main_m">
        <router-link
          class="item"
          v-for="(t, j) in s.templates"
          :key="j"
          :to="'/detail/' + t.designTemplateId"
        >
          <img :src="t.designTemplateImageUrl" alt />
        </router-link>     
      </div>
      <div class="main_b">
        <button>更多</button>
        <button>换一批</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      sceneDetail: [],
      pageNo: 1,
      loading: false,
      finished: false,
    };
  },
  created() {
    this.getLists(this.pageNo);
    // call, apply, bind
    window.onscroll = this.handleScroll.bind(this);
  },
  methods: {
    getLists(pageNo) {
      if (!this.loading && !this.finished) {
        // 降低访问频率
        this.loading = true;
        var url = `/api/mobile/main/getSceneDetail.do?_dataType=json&_dataClientType=3&_dataClientType=3&client_type=40&page_no=${pageNo}`;
        axios.get(url).then((res) => {
          this.loading = false;
          this.pageNo++;
          if (!res.data.body.data.sceneDetail) {
            this.finished = true;
          } else {
            this.sceneDetail = this.sceneDetail.concat(
              res.data.body.data.sceneDetail
            );
          }
          // console.log(this.sceneDetail);
        });
      }
    },
    handleScroll() {
      var scrollHeight = document.documentElement.scrollHeight;
      var scrollTop = document.documentElement.scrollTop;
      var clientHeight = document.documentElement.clientHeight;
      if (scrollTop + clientHeight > scrollHeight - 10) {
        this.getLists(this.pageNo);
      }
    },
  },
};
</script>

<style>
.home-main{
  background: #fff;
}
.main_box1 {
  /* margin-bottom: 60px; */
  /* 上 右 下 左 */
  padding: 10px 0px 20px 0px;
  background: #fff;
}
.main_n {
  display: flex;
  justify-content: space-between;
  margin: 1vh 3vw;
  padding-top:2vh;
}
.main_m {
  width: 100vw;
  height: 55vh;
  /* border: 1px solid red; */
  display: flex;
   flex-wrap:wrap
}
.main_m>a{
  display: block;
     width: 30vw;
  height: 25vh;
  /* border: 1px solid red; */
  margin-left: 2vw;
}
.main_m>a>img {
  width: 100%;
  height: 100%;
}
.main_b {
  display: flex;
  justify-content: space-between;
  margin: 2vh 3vw;
}

.main_b button {
  width: 40vw;
  height: 5vh;
  line-break: 5vh;
  border-radius: 3vh;
  outline: none;
  border: none;
}
</style>
